﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowPreviewTemplate">
    <CodeSnippetTabPage Text="Razor">@(@"<DxDataGrid Data=""@DataSource""
        VerticalScrollBarMode=""ScrollBarMode.Auto""
        VerticalScrollableHeight=""400""
        ShowPager=""false""
        ShowFilterRow=""true""
        CssClass=""mw-1100"">

    <Columns>
        <DxDataGridColumn Field=""@nameof(Employee.FirstName)"" SortOrder=""DataGridColumnSortOrder.Ascending"" />
        <DxDataGridColumn Field=""@nameof(Employee.LastName)"" />
        <DxDataGridColumn Field=""@nameof(Employee.Position)"" Caption=""Position"" EditorVisible=""@true"" />
        <DxDataGridDateEditColumn Field=""@nameof(Employee.BirthDate)"" DisplayFormat=""D"" Caption=""Birth Date"" EditorVisible=""@true"" />
        <DxDataGridDateEditColumn Field=""@nameof(Employee.HireDate)"" DisplayFormat=""D"" Caption=""Hire Date"" EditorVisible=""@true"" />
    </Columns>
    <RowPreviewTemplate Context=""ItemInfo"">
        @{
            Employee employee = ItemInfo.DataItem;
            <table cellpadding=""5"" cellspacing=""0"">
                <tbody>
                    <tr>
                        <td rowspan=""4"" style=""border: 0px;"">
                            <img src=""_content/BlazorDemo/images/Employees/@(employee.FileName).png"" width=""76"" />
                        </td>
                        <td style=""border: 0px; white-space: normal;"">
                            @employee.Notes
                        </td>
                    </tr>
                </tbody>
            </table>
        }
    </RowPreviewTemplate>
</DxDataGrid>")</CodeSnippetTabPage>
</CodeSnippetTabbed>
